<template>
  <div class="relative w-full h-full">
    <!-- 主图片 -->
    <img 
      v-if="!hasError"
      :src="src" 
      :alt="alt"
      :class="imageClass"
      @error="handleError"
      @load="handleLoad"
      loading="lazy"
    />
    
    <!-- 备用方案 - 只在图片加载失败时显示 -->
    <div 
      v-if="hasError"
      class="w-full h-full flex items-center justify-center bg-gradient-to-br from-purple-100 to-blue-100"
      :class="imageClass"
    >
      <div class="text-center">
        <div class="w-8 h-8 mx-auto mb-1 text-purple-400">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
        </div>
        <div class="text-xs text-gray-500">{{ fallbackText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  src: string
  alt?: string
  class?: string
  fallbackText?: string
}

const props = withDefaults(defineProps<Props>(), {
  alt: '',
  fallbackText: 'AI角色'
})

// 状态管理
const hasError = ref(false)

// 计算属性
const imageClass = computed(() => props.class || 'w-full h-full object-cover')

// 处理图片加载错误
const handleError = () => {
  console.warn(`图片加载失败: ${props.src}`)
  hasError.value = true
}

// 处理图片加载成功
const handleLoad = () => {
  hasError.value = false
}
</script>
